{% extends 'base.html' %}
{% load static %}

{% block title %}地图编辑器 - Creeps Judge{% endblock %}

{% block extra_css %}
<style>
    /* 地图编辑器样式 */
    :root {
        --grid-cell-width: 14px;
    }
    .map-editor-container {
        margin: 0 auto;
        padding: 20px;
        color: rgba(255, 255, 255, 0.9);
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: fit-content;
        margin: 0 auto;
    }

    .map-editor-content {
        display: flex;
        gap: 20px;
        max-width: 100%;
        align-items: flex-start;
        justify-content: center;
    }

    .map-grid-container {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(25px);
        border: 2px solid rgba(100, 150, 255, 0.3);
        overflow: auto;
        position: relative;
        scrollbar-width: thin;
        scrollbar-color: rgba(100, 150, 255, 0.5) rgba(0, 0, 0, 0.2);
        /* 自适应地图网格大小，居中显示 */
        width: fit-content;
        min-width: calc(50 * var(--grid-cell-width, 16px) + 100px + 80px); /* 网格宽度 + 间隙 + 坐标空间 + 内边距 */
        min-height: calc(50 * var(--grid-cell-width, 16px) + 100px + 80px); /* 网格高度 + 间隙 + 坐标空间 + 内边距 */
        max-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .map-grid-with-coords {
        position: relative;
        margin: 30px;
        padding-top: 6px;
        padding-left: 6px;
    }

    .grid-coords {
        position: absolute;
        font-size: 10px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--grid-cell-width, 16px);
        height: var(--grid-cell-width, 16px);
        z-index: 5;
        border-radius: 2px;
    }

    .x-coord {
        top: -20px;
    }

    .y-coord {
        left: -20px;
    }

    .map-grid {
        display: grid;
        grid-template-columns: repeat(50, var(--grid-cell-width, 16px));
        grid-template-rows: repeat(50, var(--grid-cell-width, 16px));
        gap: 1px;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 1px;
        border-radius: 5px;
        position: relative;
        z-index: 1;
    }

    .map-cell {
        width: var(--grid-cell-width, 16px);
        height: var(--grid-cell-width, 16px);
        background-color: #4CAF50; /* 默认绿色平地 */
        border: 1px solid rgba(255, 255, 255, 0.1);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        font-weight: bold;
        color: white;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    }

    /* 悬浮提示框样式 */
    .cell-tooltip {
        position: fixed;
        background: rgba(0, 0, 0, 0.9);
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 12px;
        white-space: nowrap;
        z-index: 1000;
        pointer-events: none;
        border: 1px solid rgba(100, 150, 255, 0.5);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transform: translate(-50%, -100%);
        margin-top: -8px;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .cell-tooltip.show {
        opacity: 1;
    }

    .map-cell {
        position: relative;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .map-cell:hover {
        transform: scale(1.1);
        z-index: 10;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    .map-cell.selected {
        border: 2px solid white;
    }

    .map-cell-coords {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 6px;
        color: rgba(255, 255, 255, 0.7);
        pointer-events: none;
    }

    .tile-palette {
        width: 200px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(25px);
        border: 2px solid rgba(100, 150, 255, 0.3);
        /* 与左边地图容器高度保持一致 */
        height: calc(50 * var(--grid-cell-width, 16px) + 100px + 80px);
        max-height: 100vh;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .tile-category {
        margin-bottom: 20px;
    }

    .tile-category h3 {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.2em;
        margin-bottom: 10px;
        padding-bottom: 5px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        text-align: center;
    }

    .tile-items {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tile-item {
        width: 40px;
        height: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: grab;
        transition: all 0.2s ease;
        border-radius: 5px;
        padding: 5px;
    }

    .tile-item:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: scale(1.05);
    }

    .tile-item.active {
        background: rgba(100, 150, 255, 0.3);
        box-shadow: 0 0 10px rgba(100, 150, 255, 0.5);
    }

    .tile-icon {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        margin-bottom: 5px;
    }

    .tile-name {
        font-size: 8px;
        color: rgba(255, 255, 255, 0.8);
        text-align: center;
    }

    /* 地形和资源的颜色 */
    .tile-flat { background-color: #4CAF50; }
    .tile-hill { background-color: #8B4513; }
    .tile-river { background-color: #2196F3; }
    .tile-gold { background-color: #caa905; }
    .tile-energy { background-color: #9C27B0; }
    .tile-wood { background-color: #795548; }
    .tile-stone { background-color: #9E9E9E; }
    .tile-base { background-color: #F44336; }

    .map-controls {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        gap: 10px;
    }

    .map-control-btn {
        padding: 10px 20px;
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(0, 212, 255, 0.8));
        border: none;
        border-radius: 10px;
        color: white;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .map-control-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(100, 150, 255, 0.4);
    }

    /* 撤销按钮 - 橙色 */
    .map-control-btn.undo {
        background: linear-gradient(135deg, rgba(255, 152, 0, 0.8), rgba(255, 193, 7, 0.8));
    }

    .map-control-btn.undo:hover {
        box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
    }

    /* 恢复按钮 - 绿色 */
    .map-control-btn.redo {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.8), rgba(139, 195, 74, 0.8));
    }

    .map-control-btn.redo:hover {
        box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
    }

    /* 保存按钮 - 蓝色（默认） */
    .map-control-btn.save {
        background: linear-gradient(135deg, rgba(33, 150, 243, 0.8), rgba(3, 169, 244, 0.8));
    }

    .map-control-btn.save:hover {
        box-shadow: 0 5px 15px rgba(33, 150, 243, 0.4);
    }

    /* 清空按钮 - 红色 */
    .map-control-btn.clear {
        background: linear-gradient(135deg, rgba(244, 67, 54, 0.8), rgba(233, 30, 99, 0.8));
    }

    .map-control-btn.clear:hover {
        box-shadow: 0 5px 15px rgba(244, 67, 54, 0.4);
    }

    /* 导入按钮 - 紫色 */
    .map-control-btn.import {
        background: linear-gradient(135deg, rgba(156, 39, 176, 0.8), rgba(233, 30, 99, 0.8));
    }

    .map-control-btn.import:hover {
        box-shadow: 0 5px 15px rgba(156, 39, 176, 0.4);
    }

    .map-control-btn.secondary {
        background: rgba(255, 255, 255, 0.2);
    }
</style>
{% endblock %}

{% block content %}
<div class="map-editor-container">
    <div class="map-editor-content">
        <div class="map-grid-container">
            <div class="map-grid-with-coords">
                <div class="map-grid" id="mapGrid">
                    <!-- 地图网格将通过JavaScript动态生成 -->
                </div>
                <!-- 坐标将通过JavaScript动态生成在网格边缘 -->
            </div>
        </div>

        <div class="tile-palette">
            <div class="tile-category">
                <h3>地形</h3>
                <div class="tile-items">
                    {% for key, tile in tile_types.items %}
                        {% if tile.category == 'terrain' %}
                        <div class="tile-item" data-tile-type="{{ key }}" data-tile-id="{{ tile.id }}">
                            <div class="tile-icon tile-{{ key }}"></div>
                            <div class="tile-name">{{ tile.name }}</div>
                        </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>

            <div class="tile-category">
                <h3>资源</h3>
                <div class="tile-items">
                    {% for key, tile in tile_types.items %}
                        {% if tile.category == 'resource' %}
                        <div class="tile-item" data-tile-type="{{ key }}" data-tile-id="{{ tile.id }}">
                            <div class="tile-icon tile-{{ key }}"></div>
                            <div class="tile-name">{{ tile.name }}</div>
                        </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>

            <div class="tile-category">
                <h3>建筑</h3>
                <div class="tile-items">
                    {% for key, tile in tile_types.items %}
                        {% if tile.category == 'building' %}
                        <div class="tile-item" data-tile-type="{{ key }}" data-tile-id="{{ tile.id }}">
                            <div class="tile-icon tile-{{ key }}"></div>
                            <div class="tile-name">{{ tile.name }}</div>
                        </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>

            <!-- 地图操作按钮 -->
            <div style="display: flex; flex-direction: column; gap: 8px; padding: 10px 0;">
                <button class="map-control-btn undo" id="undoBtn" style="width: 100%; padding: 8px 12px; font-size: 12px;" disabled>撤销 (Ctrl+Z)</button>
                <button class="map-control-btn redo" id="redoBtn" style="width: 100%; padding: 8px 12px; font-size: 12px;" disabled>恢复 (Ctrl+Y)</button>
                <button class="map-control-btn save" id="saveMapBtn" style="width: 100%; padding: 8px 12px; font-size: 12px;">保存地图</button>
                <button class="map-control-btn import" id="importMapBtn" style="width: 100%; padding: 8px 12px; font-size: 12px;">导入地图</button>
                <input type="file" id="mapFileInput" accept=".ts,.js" style="display: none;">
                <button class="map-control-btn clear" id="clearMapBtn" style="width: 100%; padding: 8px 12px; font-size: 12px;">清空地图</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 地图数据
        const mapData = [];
        const mapSize = 50;
        let selectedTileType = 'flat';
        let selectedTileId = 0;

        // 历史记录栈用于撤销功能
        const historyStack = [];
        const redoStack = []; // 重做栈
        const maxHistorySize = 50; // 最大历史记录数量

        // 保存当前地图状态到历史栈
        function saveMapState() {
            const currentState = JSON.parse(JSON.stringify(mapData)); // 深拷贝
            historyStack.push(currentState);

            // 限制历史记录数量
            if (historyStack.length > maxHistorySize) {
                historyStack.shift();
            }

            // 清空重做栈（因为有了新的操作）
            redoStack.length = 0;

            updateUndoRedoButtonState();
        }

        // 更新撤销和重做按钮状态
        function updateUndoRedoButtonState() {
            const undoBtn = document.getElementById('undoBtn');
            const redoBtn = document.getElementById('redoBtn');
            undoBtn.disabled = historyStack.length === 0;
            redoBtn.disabled = redoStack.length === 0;
        }

        // 撤销操作
        function undoLastAction() {
            if (historyStack.length === 0) return;

            // 保存当前状态到重做栈
            const currentState = JSON.parse(JSON.stringify(mapData));
            redoStack.push(currentState);

            // 限制重做栈数量
            if (redoStack.length > maxHistorySize) {
                redoStack.shift();
            }

            const previousState = historyStack.pop();

            // 恢复地图数据
            for (let y = 0; y < mapSize; y++) {
                for (let x = 0; x < mapSize; x++) {
                    mapData[y][x] = { ...previousState[y][x] };
                }
            }

            // 更新所有单元格的视觉状态
            updateMapDisplay();

            updateUndoRedoButtonState();
        }

        // 重做操作
        function redoLastAction() {
            if (redoStack.length === 0) return;

            // 保存当前状态到撤销栈
            const currentState = JSON.parse(JSON.stringify(mapData));
            historyStack.push(currentState);

            // 限制撤销栈数量
            if (historyStack.length > maxHistorySize) {
                historyStack.shift();
            }

            const nextState = redoStack.pop();

            // 恢复地图数据
            for (let y = 0; y < mapSize; y++) {
                for (let x = 0; x < mapSize; x++) {
                    mapData[y][x] = { ...nextState[y][x] };
                }
            }

            // 更新所有单元格的视觉状态
            updateMapDisplay();

            updateUndoRedoButtonState();
        }

        // 更新地图显示
        function updateMapDisplay() {
            const cells = document.querySelectorAll('.map-cell');
            cells.forEach(cell => {
                const x = parseInt(cell.dataset.x);
                const y = parseInt(cell.dataset.y);
                const tileType = mapData[y][x].type;
                cell.className = `map-cell tile-${tileType}`;

                // 为非平地类型显示文字
                const tileTexts = {
                    'hill': '山',
                    'river': '河',
                    'gold': '金',
                    'energy': '能',
                    'wood': '木',
                    'stone': '石',
                    'base': '基'
                };

                cell.textContent = tileTexts[tileType] || '';
            });
        }

        // 初始化地图数据
        for (let y = 0; y < mapSize; y++) {
            const row = [];
            for (let x = 0; x < mapSize; x++) {
                row.push({
                    type: 'flat',
                    id: 0
                });
            }
            mapData.push(row);
        }

        // 生成网格和坐标
        const mapGrid = document.getElementById('mapGrid');
        const gridWithCoords = mapGrid.parentElement;

        // 生成X轴坐标（顶部）
        for (let x = 0; x < mapSize; x++) {
            const xCoord = document.createElement('div');
            xCoord.className = 'grid-coords x-coord';
            xCoord.textContent = x;
            xCoord.dataset.x = x; // 存储x坐标值
            gridWithCoords.appendChild(xCoord);
        }

        // 生成Y轴坐标（左侧）
        for (let y = 0; y < mapSize; y++) {
            const yCoord = document.createElement('div');
            yCoord.className = 'grid-coords y-coord';
            yCoord.textContent = y;
            yCoord.dataset.y = y; // 存储y坐标值
            gridWithCoords.appendChild(yCoord);
        }

        // 拖拽绘制相关变量
        let isDrawing = false;
        let hasStateBeenSaved = false;

        // 更新单元格的函数
        function updateCell(cell) {
            const x = parseInt(cell.dataset.x);
            const y = parseInt(cell.dataset.y);

            // 检查是否真的有变化，避免重复保存相同状态
            const currentTile = mapData[y][x];
            if (currentTile.type === selectedTileType && currentTile.id === selectedTileId) {
                return false; // 没有变化，不需要操作
            }

            // 更新地图数据
            mapData[y][x] = {
                type: selectedTileType,
                id: selectedTileId
            };

            // 更新单元格样式
            cell.className = `map-cell tile-${selectedTileType}`;

            // 为非平地类型显示文字
            const tileTexts = {
                'hill': '山',
                'river': '河',
                'gold': '金',
                'energy': '能',
                'wood': '木',
                'stone': '石',
                'base': '基'
            };

            cell.textContent = tileTexts[selectedTileType] || '';
            return true;
        }

        // 生成地图网格
        for (let y = 0; y < mapSize; y++) {
            for (let x = 0; x < mapSize; x++) {
                const cell = document.createElement('div');
                cell.className = 'map-cell tile-flat';
                cell.dataset.x = x;
                cell.dataset.y = y;

                // 鼠标按下事件
                cell.addEventListener('mousedown', function(e) {
                    e.preventDefault();
                    isDrawing = true;
                    hasStateBeenSaved = false;

                    // 保存状态并更新单元格
                    if (updateCell(this)) {
                        saveMapState();
                        hasStateBeenSaved = true;
                    }
                });

                // 点击单元格事件（保持兼容性）
                cell.addEventListener('click', function() {
                    if (!isDrawing) {
                        if (updateCell(this)) {
                            saveMapState();
                        }
                    }
                });

                // 鼠标悬浮事件（仅在非绘制状态下显示提示）
                cell.addEventListener('mouseenter', function(e) {
                    if (isDrawing) {
                        // 如果还没有保存状态，先保存
                        if (!hasStateBeenSaved) {
                            saveMapState();
                            hasStateBeenSaved = true;
                        }
                        updateCell(this);
                        return;
                    }

                    const x = parseInt(this.dataset.x);
                    const y = parseInt(this.dataset.y);
                    const tileData = mapData[y][x];

                    // 地形类型名称映射
                    const tileTypeNames = {
                        'flat': '平地',
                        'hill': '山丘',
                        'river': '河流',
                        'gold': '黄金',
                        'energy': '能源',
                        'wood': '木材',
                        'stone': '石材',
                        'base': '基地'
                    };

                    const typeName = tileTypeNames[tileData.type] || tileData.type;

                    // 创建提示框
                    const tooltip = document.createElement('div');
                    tooltip.className = 'cell-tooltip';
                    tooltip.innerHTML = `坐标: (${x}, ${y})<br>类型: ${typeName}`;

                    // 定位提示框
                    const rect = this.getBoundingClientRect();
                    tooltip.style.left = rect.left + rect.width / 2 + 'px';
                    tooltip.style.top = rect.top + 'px';

                    document.body.appendChild(tooltip);

                    // 显示提示框
                    setTimeout(() => {
                        tooltip.classList.add('show');
                    }, 10);

                    // 存储提示框引用
                    this._tooltip = tooltip;
                });

                // 鼠标离开事件
                cell.addEventListener('mouseleave', function() {
                    if (this._tooltip) {
                        this._tooltip.remove();
                        this._tooltip = null;
                    }
                });

                mapGrid.appendChild(cell);
            }
        }

        // 全局鼠标松开事件
        document.addEventListener('mouseup', function() {
            isDrawing = false;
            hasStateBeenSaved = false;
        });

        // 防止拖拽时选中文本
        document.addEventListener('selectstart', function(e) {
            if (isDrawing) {
                e.preventDefault();
            }
        });

        // 更新坐标位置函数
        function updateCoordinatesPosition() {
            const cellWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--grid-cell-width'));
            const cellGap = 1; // 网格间隙
            const totalCellWidth = cellWidth + cellGap;

            // 更新X坐标位置
            const xCoords = document.querySelectorAll('.grid-coords.x-coord');
            xCoords.forEach(coord => {
                const x = parseInt(coord.dataset.x);
                coord.style.left = `${x * totalCellWidth + cellWidth/2}px`;
            });

            // 更新Y坐标位置
            const yCoords = document.querySelectorAll('.grid-coords.y-coord');
            yCoords.forEach(coord => {
                const y = parseInt(coord.dataset.y);
                coord.style.top = `${y * totalCellWidth + cellWidth/2}px`;
            });
        }

        // 初始化坐标位置
        updateCoordinatesPosition();

        // 选择地形/资源类型
        const tileItems = document.querySelectorAll('.tile-item');
        tileItems.forEach(item => {
            item.addEventListener('click', function() {
                // 移除之前的选中状态
                tileItems.forEach(i => i.classList.remove('active'));

                // 设置新的选中状态
                this.classList.add('active');
                selectedTileType = this.dataset.tileType;
                selectedTileId = parseInt(this.dataset.tileId);
            });
        });

        // 保存地图 - 下载为TypeScript文件
        document.getElementById('saveMapBtn').addEventListener('click', function() {
            // 地图类型到数字的映射表（基于Enums.ts中的TildeType）
            const typeToNumber = {
                'flat': 0,     // 平地
                'hill': 1,     // 山丘
                'river': 2,    // 河流
                'gold': 11,    // 黄金
                'energy': 12,  // 能源
                'wood': 13,    // 木材
                'stone': 14,   // 石材
                'base': 99     // 基地
            };

            // 创建只包含地图类型数字的二维数组
            const mapTypeArray = [];
            for (let y = 0; y < mapSize; y++) {
                const row = [];
                for (let x = 0; x < mapSize; x++) {
                    const tileType = mapData[y][x].type;
                    const typeNumber = typeToNumber[tileType] !== undefined ? typeToNumber[tileType] : 0;
                    row.push(typeNumber);
                }
                mapTypeArray.push(row);
            }

            // 生成TypeScript代码内容
            const mapName = `CustomMap${mapSize}x${mapSize}`;

            let tsContent = `/**\n * 自定义地图数据 ${mapSize}x${mapSize}\n * 0: flat\n * 1: hill\n * 2: river\n * 11: gold\n * 12: energy\n * 13: wood\n * 14: stone\n * 99: base\n */\nexport const ${mapName}: number[][] = [\n`;

            // 添加数组数据，每行保持在同一行
            for (let i = 0; i < mapTypeArray.length; i++) {
                const row = mapTypeArray[i];
                tsContent += `    [${row.join(',')}]`;
                if (i < mapTypeArray.length - 1) {
                    tsContent += ',\n';
                } else {
                    tsContent += '\n';
                }
            }

            tsContent += '];\n';

            // 创建下载链接
            const dataBlob = new Blob([tsContent], {type: 'text/typescript'});
            const url = URL.createObjectURL(dataBlob);

            // 创建下载链接并触发下载
            const downloadLink = document.createElement('a');
            downloadLink.href = url;
            downloadLink.download = `${mapName}.ts`;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);

            // 清理URL对象
            URL.revokeObjectURL(url);

            alert('地图TypeScript文件下载成功！');
        });

        // 清空地图
        document.getElementById('clearMapBtn').addEventListener('click', function() {
            if (confirm('确定要清空地图吗？')) {
                // 在清空前保存当前状态
                saveMapState();

                // 重置地图数据
                for (let y = 0; y < mapSize; y++) {
                    for (let x = 0; x < mapSize; x++) {
                        mapData[y][x] = {
                            type: 'flat',
                            id: 0
                        };
                    }
                }

                // 更新所有单元格样式
                const cells = document.querySelectorAll('.map-cell');
                cells.forEach(cell => {
                    cell.className = 'map-cell tile-flat';
                    cell.textContent = ''; // 清空文字内容
                });
            }
        });

        // 撤销按钮事件
        document.getElementById('undoBtn').addEventListener('click', function() {
            undoLastAction();
        });

        // 重做按钮事件
        document.getElementById('redoBtn').addEventListener('click', function() {
            redoLastAction();
        });

        // 导入地图功能
        document.getElementById('importMapBtn').addEventListener('click', function() {
            document.getElementById('mapFileInput').click();
        });

        // 文件选择事件
        document.getElementById('mapFileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (!file) return;

            // 验证文件类型
            const fileName = file.name.toLowerCase();
            const validExtensions = ['.ts', '.js'];
            const isValidFile = validExtensions.some(ext => fileName.endsWith(ext));
            
            if (!isValidFile) {
                alert('请选择有效的TypeScript (.ts) 或 JavaScript (.js) 文件。');
                event.target.value = '';
                return;
            }

            // 验证文件大小（限制为5MB）
            const maxSize = 5 * 1024 * 1024; // 5MB
            if (file.size > maxSize) {
                alert('文件太大，请选择小于5MB的文件。');
                event.target.value = '';
                return;
            }

            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const fileContent = e.target.result;
                    
                    // 基本内容验证
                    if (!fileContent || fileContent.trim().length === 0) {
                        throw new Error('文件内容为空。');
                    }

                    const importedMapData = parseMapFile(fileContent, file.name);
                    
                    if (importedMapData) {
                        // 保存当前状态到历史栈
                        saveMapState();
                        
                        // 应用导入的地图数据
                        applyImportedMap(importedMapData);
                        
                        alert(`地图导入成功！\n文件：${file.name}\n尺寸：${mapSize}x${mapSize}`);
                    }
                } catch (error) {
                    console.error('导入地图时出错:', error);
                    alert(`导入失败：\n${error.message}\n\n请检查文件格式是否正确。`);
                }
            };
            
            reader.onerror = function() {
                alert('读取文件时发生错误，请重试。');
            };
            
            reader.readAsText(file, 'UTF-8');
            
            // 清空文件输入，允许重复选择同一文件
            event.target.value = '';
        });

        // 解析TypeScript地图文件
        function parseMapFile(fileContent, fileName = 'unknown') {
            try {
                // 数字到地形类型的映射表
                const numberToType = {
                    0: 'flat',     // 平地
                    1: 'hill',     // 山丘
                    2: 'river',    // 河流
                    11: 'gold',    // 黄金
                    12: 'energy',  // 能源
                    13: 'wood',    // 木材
                    14: 'stone',   // 石材
                    99: 'base'     // 基地
                };

                // 清理文件内容，移除注释
                let cleanContent = fileContent
                    .replace(/\/\*[\s\S]*?\*\//g, '') // 移除块注释
                    .replace(/\/\/.*$/gm, ''); // 移除行注释

                // 使用更灵活的正则表达式提取数组数据
                // 支持多种格式：export const XXX: number[][] = [...]; 或 export const XXX = [...];
                const arrayMatch = cleanContent.match(/export\s+const\s+\w+\s*(?::\s*number\[\]\[\])?\s*=\s*(\[[\s\S]*?\]);/);
                
                if (!arrayMatch) {
                    // 尝试匹配没有export的格式
                    const simpleArrayMatch = cleanContent.match(/const\s+\w+\s*(?::\s*number\[\]\[\])?\s*=\s*(\[[\s\S]*?\]);/);
                    if (!simpleArrayMatch) {
                        throw new Error(`无法在文件 "${fileName}" 中找到有效的地图数据格式。\n\n支持的格式：\n- export const MapName: number[][] = [...];\n- export const MapName = [...];\n- const MapName: number[][] = [...];`);
                    }
                    arrayMatch[1] = simpleArrayMatch[1];
                }

                const arrayString = arrayMatch[1];
                
                // 验证数组字符串基本格式
                if (!arrayString.trim().startsWith('[') || !arrayString.trim().endsWith(']')) {
                    throw new Error('地图数据格式错误：数组格式不正确。');
                }
                
                // 解析数组字符串
                let mapArray;
                try {
                    // 使用 Function 构造函数代替 eval，更安全
                    mapArray = new Function('return ' + arrayString)();
                } catch (evalError) {
                    throw new Error(`地图数据解析错误：${evalError.message}\n请检查数组语法是否正确。`);
                }

                // 验证数组格式
                if (!Array.isArray(mapArray)) {
                    throw new Error('地图数据不是数组格式。');
                }
                
                if (mapArray.length === 0) {
                    throw new Error('地图数据为空数组。');
                }

                // 检查数组尺寸
                const height = mapArray.length;
                const width = mapArray[0] ? mapArray[0].length : 0;
                
                if (height !== mapSize || width !== mapSize) {
                    throw new Error(`地图尺寸不匹配。\n期望：${mapSize}x${mapSize}\n实际：${width}x${height}\n\n请确保地图是 ${mapSize}x${mapSize} 的正方形。`);
                }

                // 验证每一行的长度一致性和数据类型
                for (let i = 0; i < mapArray.length; i++) {
                    if (!Array.isArray(mapArray[i])) {
                        throw new Error(`第 ${i + 1} 行不是数组格式。`);
                    }
                    
                    if (mapArray[i].length !== mapSize) {
                        throw new Error(`第 ${i + 1} 行长度不匹配。期望 ${mapSize}，实际 ${mapArray[i].length}。`);
                    }
                    
                    // 验证每个元素都是数字
                    for (let j = 0; j < mapArray[i].length; j++) {
                        if (!Number.isInteger(mapArray[i][j])) {
                            throw new Error(`第 ${i + 1} 行第 ${j + 1} 列的值 "${mapArray[i][j]}" 不是有效的整数。`);
                        }
                    }
                }

                // 转换数字数组为地图数据格式
                const convertedMapData = [];
                let unknownTileCount = 0;
                
                for (let y = 0; y < height; y++) {
                    const row = [];
                    for (let x = 0; x < width; x++) {
                        const tileNumber = mapArray[y][x];
                        const tileType = numberToType[tileNumber];
                        
                        if (!tileType) {
                            unknownTileCount++;
                            console.warn(`未知的地形类型数字: ${tileNumber} 在位置 (${x}, ${y})，将使用默认平地类型。`);
                        }
                        
                        row.push({
                            type: tileType || 'flat',
                            id: tileNumber || 0
                        });
                    }
                    convertedMapData.push(row);
                }

                // 如果有未知地形类型，给出警告
                if (unknownTileCount > 0) {
                    console.warn(`导入完成，但发现 ${unknownTileCount} 个未知的地形类型，已转换为平地。`);
                }

                return convertedMapData;
                
            } catch (error) {
                // 如果是我们抛出的错误，直接传递
                if (error.message.includes('地图') || error.message.includes('数组') || error.message.includes('格式')) {
                    throw error;
                }
                // 其他未预期的错误
                throw new Error(`解析文件 "${fileName}" 时发生未知错误：${error.message}`);
            }
        }

        // 应用导入的地图数据
        function applyImportedMap(importedMapData) {
            // 更新内部地图数据
            for (let y = 0; y < mapSize; y++) {
                for (let x = 0; x < mapSize; x++) {
                    mapData[y][x] = { ...importedMapData[y][x] };
                }
            }

            // 更新所有单元格的视觉显示
            updateMapDisplay();
        }

        // 键盘快捷键支持
         document.addEventListener('keydown', function(event) {
             // Ctrl+Z 撤销
             if (event.ctrlKey && event.key === 'z' && !event.shiftKey) {
                 event.preventDefault();
                 undoLastAction();
             }
             // Ctrl+Y 或 Ctrl+Shift+Z 重做
             if ((event.ctrlKey && event.key === 'y') || (event.ctrlKey && event.shiftKey && event.key === 'Z')) {
                 event.preventDefault();
                 redoLastAction();
             }
         });



        // 默认选中平地
        const defaultTile = document.querySelector('.tile-item[data-tile-type="flat"]');
        if (defaultTile) {
            defaultTile.classList.add('active');
        }
    });
</script>
{% endblock %}